<template>
	<view class="contnet">
	<f-navbar title="新建收货地址" fontColor="#333" fontSize="34" bgColor="#fff">
		<view class="u-flex" slot="left">
			<van-icon name="arrow-left" color="#333" size="20"/>
		</view>
	</f-navbar>
		<view class="content_box">
			<div class="content_name">
				<div class="content_nameL">收货人</div>
				<input class="name_weui" :value="name" @input="onname" maxlength="20" placeholder-class="placeholder_in"
					placeholder="请填写收货人姓名" type="text">
			</div>
			<div class="content_name">
				<div class="content_nameL">手机号码</div>
				<div class="phone_input">+86
					<input class="name_weui1" :value="phone" @input="onphone" maxlength="11"
						placeholder-class="placeholder_in" placeholder="请填写收货人手机号码 " type="number">
				</div>

			</div>
			<div class="content_name">
				<div class="content_nameL">所在地区</div>
				<div class="address_box" @click="openmap">
					<input class="name_weui2" :disabled="isdisabled" :value="address" @input="onaddress"
						placeholder-class="placeholder_in" placeholder=" 所在省、市、县区、乡镇" type="text">
					<van-icon class="right_icon" name="arrow" size="18" color="#999" />
				</div>
			</div>
			<div class="content_name">
				<div class="content_nameL">详细地址</div>
				<input class="name_weui" :value="hosenum" @input="onhosenum" placeholder-class="placeholder_in"
					placeholder="街道、楼牌号" type="text">
			</div>
			<div class="content_bottom">
				<div class="content_bottomL">
					<div class="content_bottomLTitle">设置默认地址</div>
					<div class="content_bottomLTxt">提醒:下单会优先使用该地址</div>
				</div>
				<van-checkbox class="checkbox_in" :value="checked" @change="onChange" checked-color="#EB136E"></van-checkbox>
			</div>
		</view>
		<div class="btnbox" @click="onsubmit">保存并使用</div>
		<van-popup :show="isshowpopup" position="bottom" custom-style="height: 45%;" @close="onClose" >
			<van-area :area-list="areaList" title="请选择" @confirm="onconfirm" @cancel="oncancel" />
		</van-popup>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {saveAddress} from '../../../utils/app.js'
	import areaInfo from '../../../utils/area.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				name: '', // 名称
				phone: '', //手机号
				address: '', // 地址
				hosenum: '', //门牌号详细地址
				isdisabled: true, //地址输入框是否禁用
				checked:false,
				isshowpopup:false, // 显示省市县弹窗
				areaList: areaInfo.areaList,
				province:'',// 省
				city:'', // 市
				county:'', // 区
				type:0,// 是否选为默认地址  0是否 1是默认
				code:'', // 有code为编辑
				
			}
		},
		onLoad(options) {
			// console.log('000');
			console.log(options.address);
			if(options.address==undefined){
				// let list = JSON.parse(options.address)
				// this.name = list.name
				// this.phone = list.phone
				// this.address = list.province==list.city?list.city+list.county:list.province+list.city+list.county
				// this.hosenum = list.address
				// this.checked = list.type==1?true:false
				// this.type = list.type
				// this.province = list.province
				// this.city = list.city
				// this.county = list.county
				// this.code = list.code
			} else {
			let list = JSON.parse(options.address)
			this.name = list.name
			this.phone = list.phone
			this.address = list.province==list.city?list.city+list.county:list.province+list.city+list.county
			this.hosenum = list.address
			this.checked = list.type==1?true:false
			this.type = list.type
			this.province = list.province
			this.city = list.city
			this.county = list.county
			this.code = list.code
			}
		
		},
		mounted() {
			// console.log(this.$route.query.address);
		},
		methods: {
			// 点击保存
			onsubmit(){
				if(this.name==''){
					uni.showToast({
						title:'请输入名称',
						icon:'none'
					})
				} else if(this.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				} else if(this.address==''){
					uni.showToast({
						title:'请选择',
						icon:'none'
					})
				} else if(this.hosenum==''){
					uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
				} else {
					saveAddress({
						name:this.name,
						phone:this.phone,
						province: this.province,
						city:this.city,
						county:this.county,
						address: this.hosenum,
						type: this.type,
						code:this.code
					}).then(res => {
						console.log(res);
						if(res.code==1){
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2]; //上一个页面
							console.log(prevPage);				   
							   uni.navigateBack({//返回
							     delta: 1,
								 success() {
								 	prevPage.$vm.getList()
								 }
							   })
						} else {
							uni.showToast({
								title:'请求失败',
								icon:'none'
							})
						}
					})
				}
			},
			// 点击确认
			onconfirm(e){
				// console.log(e.detail.values);
				this.province = e.detail.values[0].name
				this.city = e.detail.values[1].name
				this.county = e.detail.values[2].name
				if(e.detail.values[0].name==e.detail.values[1].name){
					this.address = e.detail.values[1].name+e.detail.values[2].name
				} else {
					this.address = e.detail.values[0].name+e.detail.values[1].name+e.detail.values[2].name
				}
				this.isshowpopup = false
				
			},
			// 点击取消
			oncancel(){
				this.isshowpopup = false
			},
			// 打开地图
			openmap() {
				console.log(11);
				this.isshowpopup = true
		

			},
			// 关闭弹窗
			onClose(){
				this.isshowpopup = false
			},
			// 选择是否为默认地址
			onChange(e){
				console.log(e.detail);
				this.checked = e.detail
				if(e.detail){
					this.type = 1
				} else {
					this.type = 0
				}
				console.log(this.type);
			},
			// 详细地址
			onhosenum(e) {
				this.hosenum = e.detail.value
			},
			// 手机号
			onphone(e) {
				this.phone = e.detail.value
			},
			// 名称
			onname(e) {
				console.log(e.detail.value);
				this.name = e.detail.value
			},
		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_box {
		margin-top: 4rpx;
		width: 100%;
		height: 440rpx;
		background: #FFFFFF;
	}

	.content_name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.content_nameL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
		margin-left: 29rpx;
	}

	.name_weui {
		width: 550rpx;
		height: 61rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
		margin-right: 29rpx;
		padding-left: 20rpx;
	}

	.placeholder_in {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #CCCCCC;
	}

	.name_weui1 {
		padding-left: 20rpx;
	}

	.phone_input {
		width: 550rpx;
		height: 61rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
		margin-right: 29rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		/* line-height: 40rpx; */
	}

	.address_box {
		width: 550rpx;
		height: 61rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
		margin-right: 29rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.name_weui2 {
		width: 480rpx;
	}

	.right_icon {
		margin-right: 26rpx;
	}
	.content_bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
		margin-top: 38rpx;
	}
	.content_bottomL{
		margin-left: 28rpx;
	
	}
	.content_bottomLTitle{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}
	.content_bottomLTxt{
		font-size: 22rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}
	.checkbox_in{
		margin-right: 15rpx;
	}
	.btnbox{
		width: 100%;
		height: 98rpx;
		background: #EF0E6C;
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
	}
</style>